<template>
<div class="adoptOrderList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="订单号:">
        <el-input v-model="model.orderSn" clearable></el-input>
      </el-form-item>
      <el-form-item label="物品名称:">
        <el-input v-model="model.adoptName" clearable></el-input>
      </el-form-item>
      <el-form-item label="下单人:">
        <el-input v-model="model.memberName" clearable></el-input>
      </el-form-item>
      <el-form-item label="支付类型:" style="flex-shrink: 0;margin-right: clamp(10px, 2%, 2vw)">
        <el-select v-model="model.payType" clearable style="width: 105px">
          <el-option
            v-for="item in Object.values(getEnum('commonPayType'))"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态:" style="flex-shrink: 0;margin-right: clamp(10px, 2%, 2vw)">
        <el-select v-model="model.orderStatus" clearable style="width: 105px">
          <el-option
            v-for="item in orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="orderStatus" label="订单状态" align="center" header-align="center" min-width="100">
      <template v-slot="{row}">
        <span v-if="row.orderStatus === 0" class="y-info">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else-if="row.orderStatus === 1" class="y-warning">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else-if="row.orderStatus === 2" class="y-primary">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else-if="row.orderStatus === 3" class="y-success">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else>{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}  </span>
      </template>
    </el-table-column>
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="80">
        <template v-slot="{row}">
          <div class="table-buttons">
            <el-button size="mini" @click="showDetails(row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
  </y-table>
  <el-drawer
    :key="refreshKey"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    :size="forms.formsSize[forms.formsType] || 1000"
    destroy-on-close>
    <adopt-order-info
      v-if="forms.formsType === 'VIEW'"
      :order-id="forms.currentForm.id"></adopt-order-info>
  </el-drawer>
</div>
</template>

<script>
import adoptOrderInfo from "./adoptOrderDetails/adoptOrderInfo";
export default {
  name: "adoptOrderList",
  inject: ['getEnum'],
  provide(){
    return{
      getVarietyName: this.getVarietyName
    }
  },
  components:{adoptOrderInfo },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.adopt.queryAdoptOrderList,
        param: this.model
      }
    }
  },
  created() {
    this.$yAxios({
      url: this.$api.adopt.queryAdoptCategory
    }, info => {
      this.cateData = info;
    })
  },
  data(){
    return {
      orderStatusOptions: this.getEnum('orderStatus'),
      refreshKey: 0,
      cateData: [],
      model:{
        adoptName: '',
        memberName: '',
        orderSn: '',
        orderStatus: '',
        payType: ''
      },
      columns: [{
        label: "订单号",
        prop: "orderSn",
        minWidth: '180'
      },{
        label: "物品名称",
        prop: "adoptName",
        minWidth: '140'
      },{
        label: "数量",
        prop: "adoptAmount",
        width: '50'
      },{
        label: "订单提交时间",
        prop: "commitTime",
        minWidth: '180',
        formatter(row){
          return (row.commitTime || '').replace('T', ' ');
        }
      },{
        label: "下单人",
        prop: "memberName",
        minWidth: '100'
      },{
        label: "支付金额",
        prop: "payAmount",
        formatter: (function(row){
          return `${row.payAmount}元` + (row.payType ? `【${this.$$getCommonArrayName(row.payType, Object.values(this.getEnum('commonPayType')))}】` : '')
        }).bind(this),
        minWidth: '165'
      },{
        label: "订单状态",
        prop: "orderStatus",
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'VIEW': '订单详情'
        },
        formsSize:{
          'VIEW': 800
        },
        currentForm: null,
        showForm: false,
      }
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showDetails(row){
      this.forms.formsType = 'VIEW';
      this.forms.currentForm = row;
      this.forms.showForm = true;
    },
    getVarietyName(kind, variety){
      if(!kind || !this.cateData.length) return '';
      let str = ''
      let kindObj = this.cateData.find(cd => cd.cateCode === kind);
      if(!kindObj) return '';
      str += kindObj.cateName;
      if(variety && kindObj.children && kindObj.children.length){
        let varietyObj = kindObj.children.find(vd => vd.cateCode === variety);
        if(varietyObj){
          str += '/' + varietyObj.cateName;
        }
      }
      return str;
    }
  }
}
</script>

<style scoped>

</style>